<!DOCTYPE html>
<html ng-app="ngMap">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<link href="custom-marker.css" rel="stylesheet" />
<script>
angular.module('ngMap').controller('MyCtrl', function() {
  var vm = this;
  vm.positions =[
    {pos:[40.71, -74.21]},
    {pos:[41.72, -73.20]},
    {pos:[42.73, -72.19]},
    {pos:[43.74, -71.18]},
    {pos:[44.75, -70.17]},
    {pos:[45.76, -69.16]},
    {pos:[46.77, -68.15]}
  ];
  vm.addMarker = function(event) {
    var ll = event.latLng;
    vm.positions.push({pos:[ll.lat(), ll.lng()]});
  }
});
</script>
</head>

<body ng-controller="MyCtrl as vm">

  <h3>Without zoom-to-include-markers</h3>
  <ng-map zoom="11" center="[40.74, -74.18]" scrollwheel="false">
    <marker ng-repeat="p in vm.positions"
      position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
  </ng-map>

  <h3>With zoom-to-include-markers='true'</h3>
  <ng-map zoom="11" center="[40.74, -74.18]"
    scrollwheel="false"
    zoom-to-include-markers="true">
    <marker ng-repeat="p in vm.positions"
      position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
  </ng-map>

  <h3>With zoom-to-include-markers='auto'</h3>
  Please click on map to add more markers
  <ng-map zoom="11" center="[40.74, -74.18]"
    scrollwheel="false"
    zoom-to-include-markers="auto"
    on-click="vm.addMarker()">
    <marker ng-repeat="p in vm.positions"
      position="{{p.pos}}" title="pos: {{p.pos}}"></marker>
  </ng-map>

  <h3>custom-marker zoom-to-include-markers='auto'</h3>
  Please click on map to add more markers
  <ng-map zoom="11"
    on-click="vm.addMarker()"
    zoom-to-include-markers='auto'
    center="[40.74, -74.18]">
    <custom-marker ng-repeat="p in vm.positions"
      position="{{p.pos[0]}}, {{p.pos[1]}}">
      <div>
        position: {{p.pos[0]}}, {{p.pos[1]}}
      </div>
    </custom-marker>
  </ng-map>

</body>
</html>
